昨天開完project，今天可以開始實作了。

一個專案的開發，最開始不需要急著連線Friebase，我會由先試著把一個local端的todo List寫出來、調整UI介面、放上firebase、再優化的順序進行。

所以今天先把local端做出來吧！

分析步驟與結構

無論是lab考試或是專案開發，打code前一定要先想好，否則實際到了電腦上就像無頭蒼蠅，越打越迷失方向，計算紙與HB鉛筆比筆電更重要。

現在要做一個todoList，那麼裡面會需要什麼呢？可以從需求來思考：

• 我需要show出我的todoList -> 那我可能會需要一個結構來儲存資料 -> 在react中我可以開一個array以及變化array內容的setState
• 我需要填寫我的todoList -> 那我可能會需要一個表單來傳入資料 -> 在react中我可以設一個input value以及即時更新value的setState

到這裡，我們已經知道整個資料的結構，接下來就涉及如何表現出這些資料了：

• 將array表現出來，我可能會需要一個可以逐個印出的loop
• 要得到input value，我需要一個空間可以給value、一個按鈕確定submit

想好之後，其實我們大概就可以完成這份code了。

useState的變化

所以接下來來講一些細節的東西。

useState 是 React 中一個非常重要的 Hook，用於在函數式組件中添加狀態管理功能。它允許你在component中儲存和更新狀態，並讓你的component能夠對操作作出反應。

使用 useState Hook 時，需要宣告一個狀態變數和一個函數(parameter, function)，通常會以陣列的方式進行宣告。這個function將用於更新parameter的值，來描述一個新的狀態，而初始值則作為 useState 的參數。

初始值需要符合邏輯，像是在這個project中，input value的初始值就不該有東西，但todo array的初始值或許可以放一些事項。

map印出

map是一個可以用來遍歷初始矩陣的方式。

透過 const newArray = originalArray.map(callbackFunction);的方式，可以完成這段實作，例如在我的code中，便是將todos遍歷，todo是map動態生成的元素，將這些元素陳列在螢幕上(li)。詳細內容可以看下述完整的程式碼。

完整code

import { useState } from 'react'
import './App.css';

function App() {
  const [todos, setTodos] = useState([
    {your initial value}
  ])

  const [input, setInput] = useState('')

  const addTodo = e => {
    e.preventDefault()
    setTodos([...todos, input])
    setInput('')
  }

  return (
    <div className="App">
      <h1>My TODO List</h1>
      <form>
        <input value={input} onChange={e => setInput(e.target.value)} />
        <button type="submit" onClick={addTodo}>Add Todo</button>
      </form>
      <ul>
        {todos.map(todo => <li>{todo}</li>)}
      </ul>
    </div>
  );
}

export default App;

完成本段實作後，你就可以在localhost端看到基礎的todoList網頁了(在cmd使用npm start開啟localhost)，也可以加入新的事件。